{% extends "base.html" %}

{% block title %}
<title>我的订单</title>
{% endblock %}
{% block css %}
<style>
    .myfooter{
        position: relative;
        bottom: 0px;
    }
</style>
{% endblock %}

{% block body %}
{% include 'header.html' %}
{% csrf_token %}

<h1>我的订单</h1>

<div class="row col-md-6 col-md-offset-3">
    <h1>未支付订单</h1>
    <table class="table table-hover" id="table1">
        <tr>
            <th>课程名</th>
            <th>作者</th>
            <th>售价</th>
            <th>支付状态</th>
            <th></th>
            <th></th>
        </tr>
        {% for order in page1 %}
        {% if not order.status %}
        <tr class="confire{{ order.course.id }}">
            <td>{{ order.course.title }}</td>
            <td>{{ order.course.author }}</td>
            <td>{{ order.course.price }}</td>

            <td><span class="text-danger no_pag{{ order.course.id }} ">未支付</span></td>
            <td>
                <button type="button" class="btn btn-danger go_buy go_buy{{ order.course.id }} "
                        data-order-id="{{ order.course.id }}">去支付
                </button>
            </td>
            <td>
                <button type="button" class="btn btn-primary btn-sm clear_order{{ order.course.id }}"
                        data-toggle="modal" data-target="#myModal">
                    取消订单
                </button>
                <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
                    <div class="modal-dialog" role="document">
                        <div class="modal-content">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                        aria-hidden="true">&times;</span></button>
                                <h4 class="modal-title" id="myModalLabel">取消订单</h4>
                            </div>
                            <div class="modal-body">
                                确认取消订单吗？
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                                <button type="button" class="btn btn-primary confire " data-dismiss="modal"
                                        data-order-id="{{ order.course.id }}">确认
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </td>

        </tr>
        {% endif %}
        {% endfor %}


    </table>
    <div class="fen_page1">
        <nav aria-label="Page navigation">
            <ul class="pagination">
                {% if page1.has_previous %}
                <li>
                    <a href="?page1={{ page1.previous_page_number }}" aria-label="Previous">
                        <span aria-hidden="true">&laquo;</span>
                    </a>
                </li>
                {% endif %}


                {% for i in page1.paginator.get_elided_page_range%}
                {% if page1.number == i %}
                <li class="active"><a href="?page1={{ i }}">{{ i }}</a></li>
                {% else %}
                <li><a href="?page1={{ i }}">{{ i }}</a></li>
                {% endif %}
                {% endfor %}


                {% if page1.has_next %}
                <li>
                    <a href="?page1={{ page1.next_page_number }}" aria-label="Next">
                        <span aria-hidden="true">&raquo;</span>
                    </a>
                </li>
                {% endif %}


            </ul>
        </nav>
    </div>

    <hr>
    <hr>
<h1>购买记录</h1>
    <table class="table table-hover" id="table2">
        <tr>
            <th>课程名</th>
            <th>作者</th>
            <th>售价</th>
            <th>支付状态</th>
            <th></th>
            <th></th>
        </tr>
        {% for order in page2 %}
        <tr class="confire{{ order.course.id }}">
            <td>{{ order.course.title }}</td>
            <td>{{ order.course.author }}</td>
            <td>{{ order.course.price }}</td>

            <td><span class="text-success">交易完成</span></td>
            <td>
                 <button type="button" class="btn btn-success "
                        data-toggle="modal" data-target="#myModal1">
                    售后
                </button>
                <div class="modal fade" id="myModal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
                    <div class="modal-dialog" role="document">
                        <div class="modal-content">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                        aria-hidden="true">&times;</span></button>
                                <h4 class="modal-title" id="myModalLabel1">售后服务</h4>
                            </div>
                            <div class="modal-body">
                                老弟醒醒，没有售后
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                            </div>
                        </div>
                    </div>
                </div>
            </td>
            <td>
                <button type="button" class="btn btn-info  buy_again " data-course-id="{{ order.course.id }}">再来一单
                </button>
            </td>
        </tr>
        {% endfor %}
    </table>


    <div class="fen_page2">
        <nav aria-label="Page navigation">
            <ul class="pagination">
                {% if page2.has_previous %}
                <li>
                    <a href="?page2={{ page2.previous_page_number }}" aria-label="Previous">
                        <span aria-hidden="true">&laquo;</span>
                    </a>
                </li>
                {% endif %}


                {% for i in page2.paginator.get_elided_page_range%}
                {% if page2.number == i %}
                <li class="active"><a href="?page2={{ i }}">{{ i }}</a></li>
                {% else %}
                <li><a href="?page2={{ i }}">{{ i }}</a></li>
                {% endif %}
                {% endfor %}


                {% if page2.has_next %}
                <li>
                    <a href="?page2={{ page2.next_page_number }}" aria-label="Next">
                        <span aria-hidden="true">&raquo;</span>
                    </a>
                </li>
                {% endif %}


            </ul>
        </nav>
    </div>

</div>
{% include 'footer.html' %}
{% endblock %}
{% block js %}
<script>


    $(function () {
        $("#table1 .confire").click(function () {
                const courseId = $(this).data('order-id');
                $.ajax({
                    url: "/operation/buy_order_change/",
                    method: "post",
                    //  制作post  发送的信息
                    data: {
                        "csrfmiddlewaretoken": $('[type="hidden"]').val(),
                        "course_id": courseId
                    },
                    success: function (data) {
                        if (data.data.state) {
                            console.log("取消订单")
                            $(`#table1 .confire${courseId}`).first().remove()
                            $('.modal-backdrop').remove();

                        }
                    }
                });
            }
        )
    })


    $(function () {
        $("#table1 .go_buy").click(function () {
                const courseId = $(this).data('order-id');
                $.ajax({
                    url: "/operation/buy_order_status/",
                    method: "post",
                    //  制作post  发送的信息
                    data: {
                        "csrfmiddlewaretoken": $('[type="hidden"]').val(),
                        "course_id": courseId
                    },
                    success: function (data) {
                        if (data.data.state) {
                            console.log("支付成功")

                            $(`#table1 .no_pag${courseId}`).first().html("交易完成")
                            $(`#table1 .no_pag${courseId}`).first().removeClass("text-danger")
                            $(`#table1 .no_pag${courseId}`).first().addClass("text-success")
                            $(`#table1 .go_buy${courseId}`).first().html("售后")
                            $(`#table1 .go_buy${courseId}`).first().removeClass("btn-danger")
                            $(`#table1 .go_buy${courseId}`).first().addClass("btn-success")
                            $(`#table1 .clear_order${courseId}`).first().html("再来一单")
                            $(`#table1 .clear_order${courseId}`).first().removeClass("btn-primary")
                            $(`#table1 .clear_order${courseId}`).first().addClass("btn-info")

                            let payed_order = $(`#table1 .confire${courseId}`).first()
                            $(`#table1 .confire${courseId}`).first().remove()
                            $(`#table2`).append(payed_order)
                            location.reload()

                        }
                    }
                });
            }
        )
    })


    $(function () {
        $("#table2 .buy_again").click(function () {

                const courseId = $(this).data('course-id');
                $.ajax({
                    url: "/operation/buy_again/",
                    method: "post",
                    //  制作post  发送的信息
                    data: {
                        "csrfmiddlewaretoken": $('[type="hidden"]').val(),
                        "course_id": courseId
                    },
                    success: function (data) {
                        if (data.data.status) {
                            location.reload()
                        }


                    }
                });
            }
        )
    })


</script>
{% endblock %}